<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js"></script>


    <style>
        .level1 {
            position: relative;
            display: flex;
            justify-content: stretch;
            align-items: stretch;
            gap: 2.5em;
            padding: 0.8em;
        }

        .code-zone {
            width: 75%;
        }

        .output-zone {
            width: 25%;
        }

        #output {
            height: fit-content;
        }

        .show-zone {
            padding: 0.8em;
        }

        button.download {
            en
        }
    </style>
</head>

<body>

    <div class="level1">

        <div class="code-zone">

            <p>下方输入pybi-next代码，点击 run 执行。所有结果只在本页面有效，不会在电脑上产生任何文件</p>
            <p>注意，输出文件必需是 <span>test.html</span></p>
            <textarea id="code" style="width: 100%;" rows="6">
import pybi as pbi
import pandas as pd

charts = pbi.easy_echarts

df = pd.DataFrame(
    {
        "value": [120, 200, 150, 80, 70, 110, 130],
        "week": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    }
)
# 普通柱状图
data = pbi.set_source(df)

pbi.add_slicer(data['week'])
opts = charts.make_bar(data, x="week", y="value")
pbi.add_echart(opts)
pbi.to_html('test.html')
                    </textarea>


            <button onclick="evaluatePython()">Run</button>

        </div>


        <div class="output-zone">

            <div>Output:</div>
            <textarea id="output" style="width: 100%;" rows="6" disabled></textarea>

        </div>

    </div>


    <div class="show-zone">
        <button class="download" onclick="downloadResult()">下载</button>
        <div id="frame-box">


            <!-- <iframe id="frame" frameborder="0" style="height: 100vh;width: 100%;border: 1px solid #000;"></iframe> -->

        </div>

    </div>



    <script>
        const outputCp = document.getElementById("output");
        const code = document.getElementById("code");

        function addToOutput(s) {
            outputCp.value = s
        }

        function output2frame(s) {
            const frameBox = document.getElementById('frame-box')
            frameBox.innerHTML = ''

            const frame = document.createElement('iframe')
            frame.style.cssText = 'height: 100vh;width: 100%;border: 1px solid #000;'

            frameBox.appendChild(frame)

            const ed = frame.contentDocument
            ed.open();
            ed.write(s);
            ed.close();
        }


        async function main() {
            outputCp.value = '加载环境...'
            const pyodide = await loadPyodide();
            await pyodide.loadPackage("sqlite3")
            await pyodide.loadPackage("micropip");
            const micropip = pyodide.pyimport("micropip");
            await micropip.install("typing_extensions")
            await micropip.install('pybi-next');
            outputCp.value = '加载完成'
            return pyodide;
        }
        let pyodideReadyPromise = main();



        async function evaluatePython() {
            let pyodide = await pyodideReadyPromise;

            outputCp.value = ''

            try {
                outputCp.value = '开始执行代码...'
                let output = await pyodide.runPythonAsync(code.value, {});

                let file = pyodide.FS.readFile("test.html", { encoding: "utf8" });
                output2frame(file);
                outputCp.value = '完成'
                // console.log(file.length);
                // addToOutput(file)
            } catch (err) {
                addToOutput(err);
            }
        }

        async function downloadResult() {
            outputCp.value = '生成文件...'
            let pyodide = await pyodideReadyPromise;
            let file = pyodide.FS.readFile("test.html", { encoding: "utf8" });
            const blob = new Blob([file])

            const a = document.createElement('a')
            a.download = 'test.html'
            a.style.display = 'none'
            a.href = URL.createObjectURL(blob)
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
        }
    </script>
</body>

</html>